<template>
  <div>
    <div class="miTop">
      <p>物流管理后台</p>
      <div class="mi_user">
        <!-- <i class="iconfont icon-lingdang"></i> -->
        <div class="mi_headImg">
          <a href="#">
            <img src="../assets/images/pic2.jpg" />
            <span class="manager_name">{{ name }}</span>
          </a>
        </div>
      </div>
    </div>
    <div class="miContent">
      <w-col>
        <w-menu default-active="1-1" class="w-menu-vertical-demo">
          <w-submenu index="1">
            <template slot="title">
              <i class="iconfont icon-yuangongguanli1"></i>&nbsp;
              <span class="managerTitle_item">员工管理</span>
            </template>
            <w-menu-item class="item" index="1-1" @click="peopleList">员工列表</w-menu-item>
          </w-submenu>
          <w-submenu index="2">
            <template slot="title">
              <i class="iconfont icon-leftfont-62"></i>&nbsp;
              <span class="managerTitle_item">车辆管理</span>
            </template>
            <w-menu-item @click="handleCar"  class="item" index="2-1">车辆列表</w-menu-item>
          </w-submenu>
          <w-submenu index="3">
            <template slot="title">
              <i class="iconfont icon-dingdanguanli"></i>&nbsp;
              <span class="managerTitle_item">订单管理</span>
            </template>
            <w-menu-item @click="handleList" class="item" index="3-1">订单列表</w-menu-item>
            <w-menu-item @click="handleDistribute" class="item" index="3-2">待分配订单</w-menu-item>
          </w-submenu>
        </w-menu>
      </w-col>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "ManagerIndex",
  data() {
    return {
        name: "",
    };
  },
  methods:{
    peopleList(){
      this.$router.push({
        name:'yuangong'
      })
    },
    handleCar(){
      this.$router.push({
        name:'cheliang'
      })
    },
    handleList(){
      this.$router.push({
        name:'dingdan'
      })
    },
    handleDistribute(){
      this.$router.push({
        name:'fenpei'
      })
    }
  },
  mounted() {
    this.name = localStorage.getItem('username')
  },
};
</script>

<style>
li {
  list-style: none;
}
.miTop {
  display: flex;
  width: 100%;
  height: 60px;
  background-color: #333;
}
.miTop p {
  color: #fff;
  font-size: 21px;
  line-height: 60px;
  width: 150px;
  margin-left: 30px;
}
.mi_user {
  display: flex;
  margin-left: 1000px;
  width: 300px;
  height: 100%;
}
.mi_headImg a {
  height: 100%;
  display: flex;
  flex-direction: row;
}
.mi_headImg img {
  margin-top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 30px;
}
.manager_name {
  margin-left: 8px;
  line-height: 60px;
  color: #fff;
  font-size: 14px;
}
.miContent {
  width: 250px;
  float: left;
}
.managerTitle_item {
  font-size: 15px;
  margin-left: 5px;
}
</style>
